<template>
  <div class="test-step-content">
    <div class="title">健康能力评估</div>
    <!-- 新增：左右布局容器 -->
    <div class="content-wrapper">
      <!-- 左侧：原有所有标签页内容 -->
      <div class="left-main">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <!-- 健康评估标签页 -->
          <el-tab-pane label="健康评估" name="first">
            <div class="assessment-content">
              <!-- 原有：疾病和用药情况区域 -->
              <div class="section">
                <h3 class="section-title">疾病和用药情况</h3>
                <!-- 疾病诊断（必填） -->
                <div class="disease-diagnosis">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>疾病诊断
                  </label>
                  <el-checkbox-group
                    v-model="formData.diseases"
                    @change="handleDiseaseChange"
                  >
                    <el-checkbox label="无疾病">无疾病</el-checkbox>
                    <el-checkbox label="冠心病I25.1">冠心病I25.1</el-checkbox>
                    <el-checkbox label="糖尿病E10-E14"
                      >糖尿病E10-E14</el-checkbox
                    >
                    <el-checkbox label="肺炎J14">肺炎J14</el-checkbox>
                    <el-checkbox label="高血压I10">高血压I10</el-checkbox>
                    <el-checkbox label="癫痫G40">癫痫G40</el-checkbox>
                    <el-checkbox label="艾滋病B24">艾滋病B24</el-checkbox>
                    <el-checkbox label="慢性肾功能衰竭N18-N19"
                      >慢性肾功能衰竭N18-N19</el-checkbox
                    >
                    <el-checkbox label="脑出血I60-I62"
                      >脑出血I60-I62</el-checkbox
                    >
                    <el-checkbox label="脑梗塞I63">脑梗塞I63</el-checkbox>
                    <el-checkbox label="尿路感染">尿路感染</el-checkbox>
                    <el-checkbox label="帕金森综合症G20-G22"
                      >帕金森综合症G20-G22</el-checkbox
                    >
                    <el-checkbox label="消化道出血K20-K31"
                      >消化道出血K20-K31</el-checkbox
                    >
                    <el-checkbox label="肿瘤C00-D48">肿瘤C00-D48</el-checkbox>
                    <el-checkbox label="截肢（6个月内）"
                      >截肢（6个月内）</el-checkbox
                    >
                    <el-checkbox label="骨折（3个月内）"
                      >骨折（3个月内）</el-checkbox
                    >
                  </el-checkbox-group>
                  <p v-if="errorMsg.disease" class="error-tip">
                    {{ errorMsg.disease }}
                  </p>
                </div>

                <!-- 用药情况（非必选） -->
                <div class="medication">
                  <label class="section-subtitle">用药情况</label>
                  <el-table
                    :data="formData.medications"
                    border
                    style="width: 100%"
                    @row-click="handleRowClick"
                  >
                    <el-table-column prop="drugName" label="药物名称">
                      <template #default="scope">
                        <el-input
                          v-model="scope.row.drugName"
                          placeholder="请输入药物名称（非必填）"
                          maxlength="20"
                          show-word-limit
                        />
                      </template>
                    </el-table-column>
                    <el-table-column prop="usage" label="服药方法">
                      <template #default="scope">
                        <el-input
                          v-model="scope.row.usage"
                          placeholder="请输入服药方法（非必填）"
                          maxlength="20"
                          show-word-limit
                        />
                      </template>
                    </el-table-column>
                    <el-table-column prop="dosage" label="用药剂量">
                      <template #default="scope">
                        <el-input
                          v-model="scope.row.dosage"
                          placeholder="请输入用药剂量（非必填）"
                          maxlength="20"
                          show-word-limit
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                      <template #default="scope">
                        <div class="operate-btns">
                          <!-- 最后一行显示添加按钮 -->
                          <el-button
                            v-if="
                              scope.$index === formData.medications.length - 1
                            "
                            icon="Plus"
                            type="primary"
                            size="mini"
                            @click.prevent="handleAddMedication"
                            title="添加用药"
                          />

                          <!-- 所有行显示删除按钮（保留1行） -->
                          <el-button
                            icon="Delete"
                            type="danger"
                            size="mini"
                            @click.prevent="
                              handleDeleteMedication(scope.$index)
                            "
                            :disabled="formData.medications.length === 1"
                            title="删除用药"
                          />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <!-- 原有：近30天内风险事件区域 -->
              <div class="section">
                <h3 class="section-title">近30天内风险事件</h3>
                <div class="risk-event">
                  <div class="event-item">
                    <label class="section-subtitle">
                      <span class="required-mark">*</span>跌倒
                    </label>
                    <el-radio-group
                      v-model="formData.fall"
                      @change="() => (errorMsg.risk.fall = '')"
                    >
                      <el-radio label="无">无</el-radio>
                      <el-radio label="发生过1次">发生过1次</el-radio>
                      <el-radio label="发生过2次">发生过2次</el-radio>
                      <el-radio label="发生过3次以上">发生过3次以上</el-radio>
                    </el-radio-group>
                    <p v-if="errorMsg.risk.fall" class="error-tip inline-tip">
                      {{ errorMsg.risk.fall }}
                    </p>
                  </div>

                  <div class="event-item">
                    <label class="section-subtitle">
                      <span class="required-mark">*</span>走失
                    </label>
                    <el-radio-group
                      v-model="formData.wander"
                      @change="() => (errorMsg.risk.wander = '')"
                    >
                      <el-radio label="无">无</el-radio>
                      <el-radio label="发生过1次">发生过1次</el-radio>
                      <el-radio label="发生过2次">发生过2次</el-radio>
                      <el-radio label="发生过3次以上">发生过3次以上</el-radio>
                    </el-radio-group>
                    <p v-if="errorMsg.risk.wander" class="error-tip inline-tip">
                      {{ errorMsg.risk.wander }}
                    </p>
                  </div>

                  <div class="event-item">
                    <label class="section-subtitle">
                      <span class="required-mark">*</span>噎食
                    </label>
                    <el-radio-group
                      v-model="formData.choke"
                      @change="() => (errorMsg.risk.choke = '')"
                    >
                      <el-radio label="无">无</el-radio>
                      <el-radio label="发生过1次">发生过1次</el-radio>
                      <el-radio label="发生过2次">发生过2次</el-radio>
                      <el-radio label="发生过3次以上">发生过3次以上</el-radio>
                    </el-radio-group>
                    <p v-if="errorMsg.risk.choke" class="error-tip inline-tip">
                      {{ errorMsg.risk.choke }}
                    </p>
                  </div>

                  <div class="event-item">
                    <label class="section-subtitle">
                      <span class="required-mark">*</span>自杀
                    </label>
                    <el-radio-group
                      v-model="formData.suicide"
                      @change="() => (errorMsg.risk.suicide = '')"
                    >
                      <el-radio label="无">无</el-radio>
                      <el-radio label="发生过1次">发生过1次</el-radio>
                      <el-radio label="发生过2次">发生过2次</el-radio>
                      <el-radio label="发生过3次以上">发生过3次以上</el-radio>
                    </el-radio-group>
                    <p
                      v-if="errorMsg.risk.suicide"
                      class="error-tip inline-tip"
                    >
                      {{ errorMsg.risk.suicide }}
                    </p>
                  </div>

                  <div class="event-item">
                    <label class="section-subtitle">
                      <span class="required-mark">*</span>昏迷
                    </label>
                    <el-radio-group
                      v-model="formData.coma"
                      @change="() => (errorMsg.risk.coma = '')"
                    >
                      <el-radio label="无">无</el-radio>
                      <el-radio label="发生过1次">发生过1次</el-radio>
                      <el-radio label="发生过2次">发生过2次</el-radio>
                      <el-radio label="发生过3次以上">发生过3次以上</el-radio>
                    </el-radio-group>
                    <p v-if="errorMsg.risk.coma" class="error-tip inline-tip">
                      {{ errorMsg.risk.coma }}
                    </p>
                  </div>
                </div>
              </div>
              <!-- 新增：身体健康情况模块 -->
              <div class="section">
                <h3 class="section-title">身体健康情况</h3>

                <!-- 伤口情况（必填） -->
                <div class="health-item">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>伤口情况
                  </label>
                  <el-checkbox-group
                    v-model="formData.wound"
                    @change="() => (errorMsg.wound = '')"
                  >
                    <el-checkbox label="无">无</el-checkbox>
                    <el-checkbox label="擦伤">擦伤</el-checkbox>
                    <el-checkbox label="烧烫伤">烧烫伤</el-checkbox>
                    <el-checkbox label="术后伤口">术后伤口</el-checkbox>
                    <el-checkbox label="糖尿病足溃疡">糖尿病足溃疡</el-checkbox>
                    <el-checkbox label="血管性溃疡">血管性溃疡</el-checkbox>
                    <el-checkbox label="其他伤口">其他伤口</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="errorMsg.wound" class="error-tip">
                    {{ errorMsg.wound }}
                  </p>
                </div>

                <!-- 特殊医疗照护情况（必填） -->
                <div class="health-item">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>特殊医疗照护情况
                  </label>
                  <el-checkbox-group
                    v-model="formData.medicalCare"
                    @change="() => (errorMsg.medicalCare = '')"
                  >
                    <el-checkbox label="无">无</el-checkbox>
                    <el-checkbox label="胃管">胃管</el-checkbox>
                    <el-checkbox label="尿管">尿管</el-checkbox>
                    <el-checkbox label="气管切开">气管切开</el-checkbox>
                    <el-checkbox label="无创呼吸机">无创呼吸机</el-checkbox>
                    <el-checkbox label="透析">透析</el-checkbox>
                    <el-checkbox label="胃/肠/膀胱造瘘"
                      >胃/肠/膀胱造瘘</el-checkbox
                    >
                    <el-checkbox label="其他">其他</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="errorMsg.medicalCare" class="error-tip">
                    {{ errorMsg.medicalCare }}
                  </p>
                </div>

                <!-- 自理能力（必填） -->
                <div class="health-item">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>自理能力
                  </label>
                  <el-radio-group
                    v-model="formData.selfCare"
                    @change="() => (errorMsg.selfCare = '')"
                  >
                    <el-radio label="不能自理">不能自理</el-radio>
                    <el-radio label="轻度依赖">轻度依赖</el-radio>
                    <el-radio label="中度依赖">中度依赖</el-radio>
                    <el-radio label="可自理">可自理</el-radio>
                  </el-radio-group>
                  <p v-if="errorMsg.selfCare" class="error-tip">
                    {{ errorMsg.selfCare }}
                  </p>
                </div>

                <!-- 痴呆前兆（必填） -->
                <div class="health-item">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>痴呆前兆
                  </label>
                  <el-checkbox-group
                    v-model="formData.dementia"
                    @change="() => (errorMsg.dementia = '')"
                  >
                    <el-checkbox label="行为异常">行为异常</el-checkbox>
                    <el-checkbox label="记忆障碍">记忆障碍</el-checkbox>
                    <el-checkbox label="日常生活能力减退"
                      >日常生活能力减退</el-checkbox
                    >
                    <el-checkbox label="呆坐">呆坐</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="errorMsg.dementia" class="error-tip">
                    {{ errorMsg.dementia }}
                  </p>
                </div>

                <!-- 其他（非必填） -->
                <div class="health-item">
                  <label class="section-subtitle1">其他</label>
                  <el-input
                    v-model="formData.otherHealth"
                    placeholder="请输入其他健康情况（非必填）"
                    maxlength="50"
                    style="width: 300px"
                    show-word-limit
                  />
                </div>
              </div>

              <!-- 新增：近期体检报告模块（无DOM操作，纯数据驱动） -->
              <div class="section">
                <h3 class="section-title">近期体检报告</h3>
                <div class="health-item">
                  <label class="section-subtitle">
                    <span class="required-mark">*</span>体检报告
                  </label>
                  <input
                    type="file"
                    class="hidden"
                    accept=".pdf,.jpg,.png"
                    @change="(e) => handleFileChange(e, 'healthReport')"
                    ref="fileInputRef"
                  />
                  <el-button
                    v-if="!uploadFiles.healthReport"
                    icon="Upload"
                    type="primary"
                    @click="handleClickUploadBtn"
                  >
                    选择文件上传
                  </el-button>
                  <!-- 上传后显示区域（不变） -->
                  <div
                    class="upload-file-display"
                    v-if="uploadFiles.healthReport"
                  >
                    <img
                      v-if="uploadFiles.healthReport.type.includes('image')"
                      :src="uploadFiles.healthReport.url"
                      alt="体检报告图片"
                      class="image-thumbnail"
                    />
                    <div class="pdf-display" v-else>
                      <el-icon class="pdf-icon"><Document /></el-icon>
                      <span class="pdf-name">{{
                        uploadFiles.healthReport.name
                      }}</span>
                    </div>
                    <el-button
                      icon="Delete"
                      type="text"
                      size="mini"
                      @click="handleDeleteFile('healthReport')"
                      class="delete-btn"
                      style="color: #ff4d4f"
                    >
                      删除
                    </el-button>
                  </div>
                  <p v-if="errorMsg.healthReport" class="error-tip">
                    {{ errorMsg.healthReport }}
                  </p>
                  <p class="tip-text">
                    支持PDF/JPG/PNG格式，单个文件不超过20MB
                  </p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 能力评估标签页 -->
          <el-tab-pane label="能力评估" name="second">
            <div class="assessment-content">
              <!-- 1. 自理能力评估模块 -->
              <div class="section">
                <h3 class="section-title">自理能力评估</h3>

                <!-- 进食评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>1.进食:
                      使用适当的器具将食物送入嘴中并咽下
                    </label>
                    <div class="score">
                      得分: {{ formData.selfCareAbility.scores.eat }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.selfCareAbility.result.eat"
                    @change="(val) => calculateScore('selfCare', 'eat', val)"
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.独立完成，不需要协助"
                      >A.独立完成，不需要协助</el-radio
                    >
                    <el-radio label="B.在他人语言指导或照看下完成"
                      >B.在他人语言指导或照看下完成</el-radio
                    >
                    <el-radio label="C.需要他人协助，但以自身完成为主"
                      >C.需要他人协助，但以自身完成为主</el-radio
                    >
                    <el-radio label="D.主要依靠协助，自身能予配合"
                      >D.主要依靠协助，自身能予配合</el-radio
                    >
                    <el-radio label="E.完全依赖他人协助，且无法给予配合"
                      >E.完全依赖他人协助，且无法给予配合</el-radio
                    >
                  </el-radio-group>
                  <p v-if="errorMsg.ability.selfCare.eat" class="error-tip">
                    {{ errorMsg.ability.selfCare.eat }}
                  </p>
                </div>

                <!-- 洗澡评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>2.洗澡: 清洗和擦干身体
                    </label>
                    <div class="score">
                      得分: {{ formData.selfCareAbility.scores.bath }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.selfCareAbility.result.bath"
                    @change="(val) => calculateScore('selfCare', 'bath', val)"
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.独立完成，不需要协助"
                      >A.独立完成，不需要协助</el-radio
                    >
                    <el-radio label="B.在他人语言指导或照看下完成"
                      >B.在他人语言指导或照看下完成</el-radio
                    >
                    <el-radio label="C.需要他人协助，但以自身完成为主"
                      >C.需要他人协助，但以自身完成为主</el-radio
                    >
                    <el-radio label="D.主要依靠协助，自身能予配合"
                      >D.主要依靠协助，自身能予配合</el-radio
                    >
                    <el-radio label="E.完全依赖他人协助，且无法给予配合"
                      >E.完全依赖他人协助，且无法给予配合</el-radio
                    >
                  </el-radio-group>
                  <p v-if="errorMsg.ability.selfCare.bath" class="error-tip">
                    {{ errorMsg.ability.selfCare.bath }}
                  </p>
                </div>

                <!-- 修饰评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>3.修饰:
                      指洗脸、刷牙、梳头、刮脸、剪指（趾）甲等
                    </label>
                    <div class="score">
                      得分: {{ formData.selfCareAbility.scores.groom }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.selfCareAbility.result.groom"
                    @change="(val) => calculateScore('selfCare', 'groom', val)"
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.独立完成，不需要协助"
                      >A.独立完成，不需要协助</el-radio
                    >
                    <el-radio label="B.在他人语言指导或照看下完成"
                      >B.在他人语言指导或照看下完成</el-radio
                    >
                    <el-radio label="C.需要他人协助，但以自身完成为主"
                      >C.需要他人协助，但以自身完成为主</el-radio
                    >
                    <el-radio label="D.主要依靠协助，自身能予配合"
                      >D.主要依靠协助，自身能予配合</el-radio
                    >
                    <el-radio label="E.完全依赖他人协助，且无法给予配合"
                      >E.完全依赖他人协助，且无法给予配合</el-radio
                    >
                  </el-radio-group>
                  <p v-if="errorMsg.ability.selfCare.groom" class="error-tip">
                    {{ errorMsg.ability.selfCare.groom }}
                  </p>
                </div>
              </div>

              <!-- 2. 精神状态评估模块 -->
              <div class="section" style="margin-top: 30px">
                <h3 class="section-title">精神状态评估</h3>

                <!-- 情绪稳定性评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>1.情绪稳定性:
                      日常情绪是否平稳，有无频繁波动或极端情绪
                    </label>
                    <div class="score">
                      得分:
                      {{ formData.mentalStateAbility.scores.moodStability }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.mentalStateAbility.result.moodStability"
                    @change="
                      (val) =>
                        calculateScore('mentalState', 'moodStability', val)
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.情绪稳定，积极乐观"
                      >A.情绪稳定，积极乐观</el-radio
                    >
                    <el-radio label="B.情绪基本平稳，偶有轻微波动"
                      >B.情绪基本平稳，偶有轻微波动</el-radio
                    >
                    <el-radio label="C.情绪时有波动，需他人安慰才能平复"
                      >C.情绪时有波动，需他人安慰才能平复</el-radio
                    >
                    <el-radio label="D.情绪频繁低落/烦躁，影响日常活动"
                      >D.情绪频繁低落/烦躁，影响日常活动</el-radio
                    >
                    <el-radio label="E.情绪极端异常，无法自主控制"
                      >E.情绪极端异常，无法自主控制</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.mentalState.moodStability"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.mentalState.moodStability }}
                  </p>
                </div>

                <!-- 记忆力评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>2.记忆力:
                      能否记住近期事件、常用物品位置或熟人信息
                    </label>
                    <div class="score">
                      得分: {{ formData.mentalStateAbility.scores.memory }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.mentalStateAbility.result.memory"
                    @change="
                      (val) => calculateScore('mentalState', 'memory', val)
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.记忆力良好，能清晰记住所有信息"
                      >A.记忆力良好，能清晰记住所有信息</el-radio
                    >
                    <el-radio label="B.偶尔忘记，提醒后能快速回忆"
                      >B.偶尔忘记，提醒后能快速回忆</el-radio
                    >
                    <el-radio label="C.经常忘记，需多次提醒才能回忆"
                      >C.经常忘记，需多次提醒才能回忆</el-radio
                    >
                    <el-radio label="D.严重健忘，仅能记住部分重要信息"
                      >D.严重健忘，仅能记住部分重要信息</el-radio
                    >
                    <el-radio label="E.完全失忆，无法记住任何近期信息"
                      >E.完全失忆，无法记住任何近期信息</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.mentalState.memory"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.mentalState.memory }}
                  </p>
                </div>

                <!-- 判断力评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>3.判断力:
                      面对日常选择（如穿衣、饮食）能否做出合理决定
                    </label>
                    <div class="score">
                      得分: {{ formData.mentalStateAbility.scores.judgment }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.mentalStateAbility.result.judgment"
                    @change="
                      (val) => calculateScore('mentalState', 'judgment', val)
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.判断力强，能自主做出合理选择"
                      >A.判断力强，能自主做出合理选择</el-radio
                    >
                    <el-radio label="B.判断力良好，偶尔需简单建议"
                      >B.判断力良好，偶尔需简单建议</el-radio
                    >
                    <el-radio label="C.判断力一般，需他人指导才能决定"
                      >C.判断力一般，需他人指导才能决定</el-radio
                    >
                    <el-radio label="D.判断力较弱，常做出不合理选择"
                      >D.判断力较弱，常做出不合理选择</el-radio
                    >
                    <el-radio label="E.无自主判断力，完全依赖他人决定"
                      >E.无自主判断力，完全依赖他人决定</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.mentalState.judgment"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.mentalState.judgment }}
                  </p>
                </div>
              </div>

              <!-- 3. 感知觉与社会参与评估模块 -->
              <div class="section" style="margin-top: 30px">
                <h3 class="section-title">感知觉与社会参与评估</h3>

                <!-- 视听能力评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>1.视听能力:
                      能否清晰看见日常物品、听见正常音量对话
                    </label>
                    <div class="score">
                      得分: {{ formData.sensorySocialAbility.scores.sense }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.sensorySocialAbility.result.sense"
                    @change="
                      (val) => calculateScore('sensorySocial', 'sense', val)
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.视听正常，无需辅助设备"
                      >A.视听正常，无需辅助设备</el-radio
                    >
                    <el-radio label="B.需佩戴眼镜/助听器，效果良好"
                      >B.需佩戴眼镜/助听器，效果良好</el-radio
                    >
                    <el-radio label="C.佩戴辅助设备后，仍有轻微障碍"
                      >C.佩戴辅助设备后，仍有轻微障碍</el-radio
                    >
                    <el-radio label="D.视听障碍明显，需他人协助沟通"
                      >D.视听障碍明显，需他人协助沟通</el-radio
                    >
                    <el-radio label="E.完全丧失视听能力，无法自主感知"
                      >E.完全丧失视听能力，无法自主感知</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.sensorySocial.sense"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.sensorySocial.sense }}
                  </p>
                </div>

                <!-- 语言沟通评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>2.语言沟通:
                      能否清晰表达需求、理解他人话语
                    </label>
                    <div class="score">
                      得分:
                      {{ formData.sensorySocialAbility.scores.communication }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="formData.sensorySocialAbility.result.communication"
                    @change="
                      (val) =>
                        calculateScore('sensorySocial', 'communication', val)
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.沟通流畅，能准确表达与理解"
                      >A.沟通流畅，能准确表达与理解</el-radio
                    >
                    <el-radio label="B.沟通基本顺畅，偶有表达偏差"
                      >B.沟通基本顺畅，偶有表达偏差</el-radio
                    >
                    <el-radio label="C.沟通存在困难，需重复或简化表达"
                      >C.沟通存在困难，需重复或简化表达</el-radio
                    >
                    <el-radio label="D.仅能说简单词语，理解能力有限"
                      >D.仅能说简单词语，理解能力有限</el-radio
                    >
                    <el-radio label="E.完全无法语言沟通，需肢体辅助"
                      >E.完全无法语言沟通，需肢体辅助</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.sensorySocial.communication"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.sensorySocial.communication }}
                  </p>
                </div>

                <!-- 社会参与评估项 -->
                <div class="ability-item">
                  <div class="title-score-wrapper">
                    <label class="item-title">
                      <span class="required-mark">*</span>3.社会参与:
                      能否参与家庭活动、社交互动或集体事务
                    </label>
                    <div class="score">
                      得分:
                      {{
                        formData.sensorySocialAbility.scores.socialParticipation
                      }}
                    </div>
                  </div>
                  <el-radio-group
                    v-model="
                      formData.sensorySocialAbility.result.socialParticipation
                    "
                    @change="
                      (val) =>
                        calculateScore(
                          'sensorySocial',
                          'socialParticipation',
                          val
                        )
                    "
                    class="vertical-radio-group"
                  >
                    <el-radio label="A.积极参与，主动融入集体"
                      >A.积极参与，主动融入集体</el-radio
                    >
                    <el-radio label="B.愿意参与，需他人邀请"
                      >B.愿意参与，需他人邀请</el-radio
                    >
                    <el-radio label="C.偶尔参与，持续时间较短"
                      >C.偶尔参与，持续时间较短</el-radio
                    >
                    <el-radio label="D.不愿参与，仅能被动配合"
                      >D.不愿参与，仅能被动配合</el-radio
                    >
                    <el-radio label="E.完全拒绝参与，封闭自我"
                      >E.完全拒绝参与，封闭自我</el-radio
                    >
                  </el-radio-group>
                  <p
                    v-if="errorMsg.ability.sensorySocial.socialParticipation"
                    class="error-tip"
                  >
                    {{ errorMsg.ability.sensorySocial.socialParticipation }}
                  </p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 评估报告标签页 -->
          <!-- 评估报告标签页（修改后） -->
          <el-tab-pane label="评估报告" name="third">
            <div class="assessment-content">
              <div
                class="section"
                style="background-color: #fff; border: 1px solid #eee"
              >
                <h3 class="section-title" style="margin-bottom: 20px">
                  健康能力评估报告
                </h3>

                <!-- 基础信息 -->
                <!-- <div class="report-item" style="margin-bottom: 15px">
                  <label
                    class="report-label"
                    style="
                      display: inline-block;
                      width: 120px;
                      font-weight: 500;
                    "
                    >评估对象ID：</label
                  >
                  <span>{{ elderlyId }}</span>
                </div> -->

                <!-- 各模块得分 -->
                <div class="report-section" style="margin: 20px 0">
                  <h4 style="font-size: 15px; color: #333; margin-bottom: 10px">
                    各模块得分详情
                  </h4>
                  <div
                    class="score-list"
                    style="display: flex; flex-direction: column; gap: 8px"
                  >
                    <div class="score-item">
                      <span style="width: 300px; display: inline-block"
                        >1. 自理能力评估（满分30分）：</span
                      >
                      <span style="font-weight: 500; color: #2d8cf0"
                        >{{ assessmentReport.selfCareTotal }} 分</span
                      >
                      <span
                        style="margin-left: 20px; font-size: 12px; color: #666"
                        >（进食：{{ formData.selfCareAbility.scores.eat }} 分 |
                        洗澡：{{ formData.selfCareAbility.scores.bath }} 分 |
                        修饰：{{
                          formData.selfCareAbility.scores.groom
                        }}
                        分）</span
                      >
                    </div>
                    <div class="score-item">
                      <span style="width: 300px; display: inline-block"
                        >2. 精神状态评估（满分30分）：</span
                      >
                      <span style="font-weight: 500; color: #2d8cf0"
                        >{{ assessmentReport.mentalStateTotal }} 分</span
                      >
                      <span
                        style="margin-left: 20px; font-size: 12px; color: #666"
                        >（情绪稳定性：{{
                          formData.mentalStateAbility.scores.moodStability
                        }}
                        分 | 记忆力：{{
                          formData.mentalStateAbility.scores.memory
                        }}
                        分 | 判断力：{{
                          formData.mentalStateAbility.scores.judgment
                        }}
                        分）</span
                      >
                    </div>
                    <div class="score-item">
                      <span style="width: 300px; display: inline-block"
                        >3. 感知觉与社会参与评估（满分30分）：</span
                      >
                      <span style="font-weight: 500; color: #2d8cf0"
                        >{{ assessmentReport.sensorySocialTotal }} 分</span
                      >
                      <span
                        style="margin-left: 20px; font-size: 12px; color: #666"
                        >（视听能力：{{
                          formData.sensorySocialAbility.scores.sense
                        }}
                        分 | 语言沟通：{{
                          formData.sensorySocialAbility.scores.communication
                        }}
                        分 | 社会参与：{{
                          formData.sensorySocialAbility.scores
                            .socialParticipation
                        }}
                        分）</span
                      >
                    </div>
                  </div>
                </div>

                <!-- 总分与能力等级 -->
                <div
                  class="report-result"
                  style="
                    margin: 30px 0;
                    padding: 15px;
                    background-color: #f5f7fa;
                    border-radius: 6px;
                  "
                >
                  <div style="margin-bottom: 10px">
                    <label
                      style="
                        width: 120px;
                        display: inline-block;
                        font-weight: 500;
                      "
                      >评估总分：</label
                    >
                    <span
                      style="font-size: 16px; font-weight: 600; color: #1989fa"
                      >{{ assessmentReport.totalScore }} 分</span
                    >
                    <span
                      style="margin-left: 10px; font-size: 12px; color: #666"
                      >（满分90分）</span
                    >
                  </div>
                  <div>
                    <label
                      style="
                        width: 120px;
                        display: inline-block;
                        font-weight: 500;
                      "
                      >能力初步等级：</label
                    >
                    <span
                      style="font-size: 16px; font-weight: 600; color: #ff7a45"
                      >{{ assessmentReport.abilityLevel }}</span
                    >
                  </div>
                </div>

                <!-- 等级说明（可选） -->
                <div
                  class="level-desc"
                  style="font-size: 12px; color: #666; margin-top: 20px"
                >
                  <p>
                    等级说明：≤10分（重度失能） | ≤20分（中重度失能） |
                    ≤30分（中度失能） | ≤40分（轻度失能） | ＞40分（能力完好）
                  </p>
                </div>
              </div>
            </div>
            <!-- 护理等级结果模块 -->
            <div
              class="section"
              style="
                background-color: #fff;
                border: 1px solid #eee;
                margin-top: 20px;
              "
            >
              <h3
                class="section-title"
                style="
                  padding: 16px 0;
                  border-bottom: 1px solid #f0f0f0;
                  margin: 0;
                "
              >
                护理等级结果
                <el-tooltip
                  effect="dark"
                  content="护理等级判定依据及最终结果"
                  placement="top"
                >
                  <i
                    class="el-icon-info"
                    style="color: #409eff; margin-left: 4px; cursor: help"
                  ></i>
                </el-tooltip>
              </h3>

              <!-- 能力等级变更依据（不换行布局） -->
              <div class="care-level-item" style="padding: 16px">
                <label
                  class="section-subtitle"
                  style="
                    width: 120px;
                    display: inline-block;
                    vertical-align: top;
                    margin-top: 4px;
                  "
                >
                  <span class="required-mark">*</span>能力等级变更依据
                </label>

                <!-- 选项容器（不换行，溢出自动滚动） -->
                <div
                  class="check-container"
                  style="
                    display: inline-block;
                    vertical-align: top;
                    width: calc(100% - 130px);
                  "
                >
                  <!-- 常规选项（横向排列不换行） -->
                  <div
                    class="check-group"
                    style="
                      display: flex;
                      gap: 20px;
                      flex-wrap: nowrap;
                      overflow-x: auto;
                      padding-bottom: 8px;
                    "
                  >
                    <el-checkbox
                      v-for="(item, index) in careLevelChangeBasis.filter(
                        (i) => i.value !== 'other'
                      )"
                      :key="index"
                      :label="item.value"
                      v-model="formData.careLevelChangeBasis"
                      style="white-space: nowrap"
                    >
                      {{ item.label }}
                    </el-checkbox>
                  </div>

                  <!-- “其他”选项单独成行（在常规选项下方） -->
                  <div class="other-option" style="margin-top: 8px">
                    <el-checkbox
                      label="other"
                      v-model="formData.careLevelChangeBasis"
                      @change="handleOtherChange"
                      style="white-space: nowrap"
                    >
                      其他
                    </el-checkbox>

                    <!-- 其他原因输入框（勾选“其他”时显示） -->
                    <div
                      v-if="formData.careLevelChangeBasis.includes('other')"
                      style="margin-top: 8px; margin-left: 22px"
                    >
                      <el-input
                        v-model="formData.otherChangeReason"
                        placeholder="请输入其他变更依据"
                        maxlength="100"
                        show-word-limit
                        style="width: 50%"
                      />
                    </div>
                  </div>
                </div>

                <p
                  v-if="errorMsg.careLevelChangeBasis"
                  class="error-tip"
                  style="margin-left: 124px; margin-top: 4px"
                >
                  {{ errorMsg.careLevelChangeBasis }}
                </p>
              </div>

              <!-- 能力最终等级（保持不变） -->
              <div class="care-level-item" style="padding: 0 16px 16px">
                <label
                  class="section-subtitle"
                  style="
                    width: 120px;
                    display: inline-block;
                    vertical-align: top;
                  "
                >
                  <span class="required-mark">*</span>能力最终等级
                </label>
                <el-radio-group
                  v-model="formData.finalAbilityLevel"
                  style="display: inline-block"
                >
                  <el-radio
                    v-for="(level, index) in finalAbilityLevels"
                    :key="index"
                    :label="level.value"
                  >
                    {{ level.label }}
                  </el-radio>
                </el-radio-group>
                <p
                  v-if="errorMsg.finalAbilityLevel"
                  class="error-tip"
                  style="margin-left: 124px; margin-top: 4px"
                >
                  {{ errorMsg.finalAbilityLevel }}
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 右侧：操作记录区域（与 left-main 同级，移出 left-main 外部） -->
      <div class="right-sidebar">
        <el-card class="operation-record-card">
          <h3>操作记录</h3>
          <ul class="record-list">
            <li>
              <div class="record-item">
                <div class="record-icon">
                  <span class="dot"></span>
                </div>
                <div class="record-content">
                  <p>发起评估-健康能力评估</p>
                  <p>{{ userStore.nickName }} (已发起)</p>
                </div>
                <div class="record-time">{{ onLoadTime }}</div>
              </div>
            </li>
            <li>
              <div class="record-item">
                <div class="record-icon">
                  <span class="dot"></span>
                </div>
                <div class="record-content">
                  <p>评估中-健康信息录入</p>
                  <p>{{ userStore.nickName }} (进行中)</p>
                </div>
                <div class="record-time">{{ currentTime }}</div>
              </div>
            </li>
            <!-- <li>
              <div class="record-item">
                <div class="record-icon">
                  <span class="dot gray"></span>
                </div>
                <div class="record-content">
                  <p>待完成-能力等级判定</p>
                  <p>系统 (待处理)</p>
                </div>
                <div class="record-time">待完成</div>
              </div>
            </li> -->
          </ul>
        </el-card>
      </div>
    </div>

    <div class="btn-group">
      <!-- 返回按钮 -->
      <el-button @click="handleGoBack" size="default" plain class="mr-3">
        返回
      </el-button>
      <!-- 提交按钮 -->
      <el-button type="primary" @click="handleSubmit" size="default">
        提交
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { ElMessage, ElUpload } from "element-plus";
import { Plus, Delete, Upload } from "@element-plus/icons-vue";
import { addAbility } from "@/api/abilityassess/ability"; //新增能力评估
import { addAssessment } from "@/api/healthassess/assessment"; //新增健康评估
import { addReport } from "@/api/assessreport/report"; //新增评估报告
import { addAccraditationrecord } from "@/api/accraditationrecord/accraditationrecord";
import { numberGeneration } from "@/utils/numberGeneration";
import useUserStore from "@/store/modules/user";
const checkInNo = ref("");
// 6. 生成入住单号（依赖老人信息，在其他接口后执行）
const queryElderlyInfo = async () => {
  try {
    checkInNo.value =  numberGeneration("RZ"); // 拼接前缀"T"和前13位身份证号
    console.log("入住单号：", checkInNo.value);
  } catch (error) {
    console.error("入住单号生成失败：", error);
  }
};
import axios from "axios";
// 2. 获取用户存储实例
const userStore = useUserStore();
// 3. 在脚本中打印用户信息
console.log("当前登录用户信息：", {
  id: userStore.id,
  name: userStore.name,
  nickName: userStore.nickName,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions,
});
const fileInputRef = ref(null);
// 工具函数：从Cookie获取Token
const getTokenFromCookie = () => {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === "Admin-Token") return value;
  }
  return "";
};
const currentTime = ref("");
const onLoadTime = ref("");
let timer = null; // 存储定时器，用于组件卸载时清除

const formatTime = (date) => {
  // 同上，格式化时间
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 组件挂载时启动定时器
onMounted(() => {
  // 初始化时间
  currentTime.value = formatTime(new Date());
  onLoadTime.value = formatTime(new Date());
  // 每秒更新一次
  timer = setInterval(() => {
    currentTime.value = formatTime(new Date());
  }, 1000);
  // 生成入住审批单号
  queryElderlyInfo();
});

// 组件卸载时清除定时器（避免内存泄漏）
onUnmounted(() => {
  if (timer) clearInterval(timer);
});
// 表单数据
const formData = reactive({
  // 新增：身体健康情况
  wound: [],
  medicalCare: [],
  selfCare: "",
  dementia: [],
  otherHealth: "",
  // 原有：疾病和用药
  diseases: [],
  medications: [{ drugName: "", usage: "", dosage: "" }],
  // 原有：风险事件
  fall: "",
  wander: "",
  choke: "",
  suicide: "",
  coma: "",
  healthReport: [], // 新增：体检报告
  healthReportUrl: "", // 存储上传后的文件URL

  // 1. 自理能力评估（原有3项：进食、洗澡、修饰）- 单独存储
  selfCareAbility: {
    result: {
      // 评估结果（选项值）
      eat: "", // 进食
      bath: "", // 洗澡
      groom: "", // 修饰
    },
    scores: {
      // 对应得分
      eat: 0,
      bath: 0,
      groom: 0,
    },
  },

  // 2. 精神状态评估（新增3项：情绪、记忆、判断力）- 单独存储
  mentalStateAbility: {
    result: {
      moodStability: "", // 情绪稳定性
      memory: "", // 记忆力
      judgment: "", // 判断力
    },
    scores: {
      moodStability: 0,
      memory: 0,
      judgment: 0,
    },
  },

  // 3. 感知觉与社会参与评估（新增3项：视听、沟通、参与）- 单独存储
  sensorySocialAbility: {
    result: {
      sense: "", // 视听能力
      communication: "", // 语言沟通
      socialParticipation: "", // 社会参与
    },
    scores: {
      sense: 0,
      communication: 0,
      socialParticipation: 0,
    },
  },

  // 护理等级结果 - 新增字段
  careLevelChangeBasis: [], // 变更依据（多选）
  finalAbilityLevel: "", // 最终等级（单选）
  otherChangeReason: "", // 其他原因（输入框）
  assessorId: "1", // 评估员ID
});
// 1. 自理能力评估 - 得分规则
const selfCareScoresRule = {
  eat: {
    "A.独立完成，不需要协助": 10,
    "B.在他人语言指导或照看下完成": 8,
    "C.需要他人协助，但以自身完成为主": 6,
    "D.主要依靠协助，自身能予配合": 3,
    "E.完全依赖他人协助，且无法给予配合": 0,
  },
  bath: {
    "A.独立完成，不需要协助": 10,
    "B.在他人语言指导或照看下完成": 8,
    "C.需要他人协助，但以自身完成为主": 6,
    "D.主要依靠协助，自身能予配合": 3,
    "E.完全依赖他人协助，且无法给予配合": 0,
  },
  groom: {
    "A.独立完成，不需要协助": 10,
    "B.在他人语言指导或照看下完成": 8,
    "C.需要他人协助，但以自身完成为主": 6,
    "D.主要依靠协助，自身能予配合": 3,
    "E.完全依赖他人协助，且无法给予配合": 0,
  },
};

// 2. 精神状态评估 - 得分规则（完全匹配界面选项文本）
const mentalStateScoresRule = {
  moodStability: {
    "A.情绪稳定，积极乐观": 10,
    "B.情绪基本平稳，偶有轻微波动": 8,
    "C.情绪时有波动，需他人安慰才能平复": 6,
    "D.情绪频繁低落/烦躁，影响日常活动": 3,
    "E.情绪极端异常，无法自主控制": 0,
  },
  memory: {
    "A.记忆力良好，能清晰记住所有信息": 10,
    "B.偶尔忘记，提醒后能快速回忆": 8,
    "C.经常忘记，需多次提醒才能回忆": 6,
    "D.严重健忘，仅能记住部分重要信息": 3,
    "E.完全失忆，无法记住任何近期信息": 0,
  },
  judgment: {
    "A.判断力强，能自主做出合理选择": 10,
    "B.判断力良好，偶尔需简单建议": 8,
    "C.判断力一般，需他人指导才能决定": 6,
    "D.判断力较弱，常做出不合理选择": 3,
    "E.无自主判断力，完全依赖他人决定": 0,
  },
};

// 3. 感知觉与社会参与评估 - 得分规则（完全匹配界面选项文本）
const sensorySocialScoresRule = {
  sense: {
    "A.视听正常，无需辅助设备": 10,
    "B.需佩戴眼镜/助听器，效果良好": 8,
    "C.佩戴辅助设备后，仍有轻微障碍": 6,
    "D.视听障碍明显，需他人协助沟通": 3,
    "E.完全丧失视听能力，无法自主感知": 0,
  },
  communication: {
    "A.沟通流畅，能准确表达与理解": 10,
    "B.沟通基本顺畅，偶有表达偏差": 8,
    "C.沟通存在困难，需重复或简化表达": 6,
    "D.仅能说简单词语，理解能力有限": 3,
    "E.完全无法语言沟通，需肢体辅助": 0,
  },
  socialParticipation: {
    "A.积极参与，主动融入集体": 10,
    "B.愿意参与，需他人邀请": 8,
    "C.偶尔参与，持续时间较短": 6,
    "D.不愿参与，仅能被动配合": 3,
    "E.完全拒绝参与，封闭自我": 0,
  },
};
// 计算能力初步等级
const assessmentReport = computed(() => {
  // 1. 计算各模块总分（自理能力、精神状态、感知觉）
  const selfCareTotal = Object.values(formData.selfCareAbility.scores).reduce(
    (sum, score) => sum + score,
    0
  );
  const mentalStateTotal = Object.values(
    formData.mentalStateAbility.scores
  ).reduce((sum, score) => sum + score, 0);
  const sensorySocialTotal = Object.values(
    formData.sensorySocialAbility.scores
  ).reduce((sum, score) => sum + score, 0);

  // 2. 计算评估总分
  const totalScore = selfCareTotal + mentalStateTotal + sensorySocialTotal;

  // 3. 根据总分判断能力初步等级
  let abilityLevel = "能力完好";
  if (totalScore <= 10) {
    abilityLevel = "重度失能";
  } else if (totalScore <= 20) {
    abilityLevel = "中重度失能";
  } else if (totalScore <= 30) {
    abilityLevel = "中度失能";
  } else if (totalScore <= 40) {
    abilityLevel = "轻度失能";
  }

  // 4. 返回实时计算的报告数据（供模板渲染）
  return {
    selfCareTotal, // 自理能力模块总分
    mentalStateTotal, // 精神状态模块总分
    sensorySocialTotal, // 感知觉与社会参与模块总分
    totalScore, // 评估总分
    abilityLevel, // 能力初步等级
  };
});
const calculateScore = (module, type, selectedLabel) => {
  // 根据模块匹配对应得分规则
  let scoreRule = {};
  switch (module) {
    case "selfCare":
      scoreRule = selfCareScoresRule;
      formData.selfCareAbility.scores[type] =
        scoreRule[type][selectedLabel] || 0;
      break;
    case "mentalState":
      scoreRule = mentalStateScoresRule;
      formData.mentalStateAbility.scores[type] =
        scoreRule[type][selectedLabel] || 0;
      break;
    case "sensorySocial":
      scoreRule = sensorySocialScoresRule;
      formData.sensorySocialAbility.scores[type] =
        scoreRule[type][selectedLabel] || 0;
      break;
    default:
      break;
  }
};
// 护理等级变更依据选项（包含“其他”）
const careLevelChangeBasis = [
  { label: "已诊断疾病超过3项", value: "已诊断疾病超过3项" },
  { label: "风险事件超过3次", value: "风险事件超过3次" },
  { label: "长期处于昏迷状态", value: "长期处于昏迷状态" },
  { label: "认知障碍/痴呆", value: "认知障碍/痴呆" },
  { label: "精神类疾病", value: "精神类疾病" },
  { label: "其他", value: "other" }, // “其他”选项单独处理
];

// 能力最终等级选项
const finalAbilityLevels = [
  { label: "能力完好", value: "能力完好" },
  { label: "轻度失能", value: "轻度失能" },
  { label: "中度失能", value: "中度失能" },
  { label: "中重度失能", value: "中重度失能" },
  { label: "重度失能", value: "重度失能" },
];

// 处理“其他”选项的勾选状态变化
const handleOtherChange = (checked) => {
  if (!checked) {
    // 取消勾选时，清空输入框内容
    formData.otherChangeReason = "";
  } else {
    // 勾选时，可自动聚焦输入框（可选）
    nextTick(() => {
      const input = document.querySelector(
        'input[placeholder="请输入其他变更依据"]'
      );
      if (input) input.focus();
    });
  }
};
// 错误提示
const errorMsg = reactive({
  // 新增：身体健康情况
  wound: "",
  medicalCare: "",
  selfCare: "",
  dementia: "",
  healthReport: "",
  // 原有：其他错误
  disease: "",
  risk: { fall: "", wander: "", choke: "", suicide: "", coma: "" },
  ability: {
    // 1. 自理能力错误提示
    selfCare: { eat: "", bath: "", groom: "" },
    // 2. 精神状态错误提示
    mentalState: { moodStability: "", memory: "", judgment: "" },
    // 3. 感知觉与社会参与错误提示
    sensorySocial: { sense: "", communication: "", socialParticipation: "" },
  },
  // 护理等级结果校验
  careLevelChangeBasis: "",
  finalAbilityLevel: "",
});

// 2. 点击自定义上传按钮时，触发原生input的文件选择弹窗
const handleClickUploadBtn = () => {
  if (fileInputRef.value) {
    fileInputRef.value.click(); // 模拟点击原生input，触发文件选择
  }
};
const handleFileChange = (e, type) => {
  const file = e.target.files[0];
  if (!file) return;
  // 第一步：验证文件格式和大小
  const isValid = validateFile(file);
  if (!isValid) {
    e.target.value = ""; // 清空选择，避免重复触发同一文件
    return;
  }
  // 第二步：直接覆盖原有文件并发起上传请求
  uploadFileToServer(file, type);
  // 第三步：清空输入框（允许重复选择同一文件）
  e.target.value = "";
};

// 4. 文件验证逻辑（提取为单独函数）
const validateFile = (file) => {
  // 验证格式
  const validTypes = ["application/pdf", "image/jpeg", "image/png"];
  if (!validTypes.includes(file.type)) {
    errorMsg.healthReport = "仅支持PDF/JPG/PNG格式文件";
    return false;
  }
  // 验证大小（20MB）
  const maxSize = 20 * 1024 * 1024;
  if (file.size > maxSize) {
    errorMsg.healthReport = "文件大小不能超过20MB";
    return false;
  }
  // 验证通过
  errorMsg.healthReport = "";
  return true;
};

// 父组件通信
const props = defineProps({
  stepNum: { type: Number, required: true },
  elderlyId: { type: Number, required: true },
});
const elderId = computed(() => props.elderlyId);
const emit = defineEmits(["goBack", "submitSuccess"]);

// 标签点击事件
const activeName = ref("first");
const handleClick = (tab) => {
  console.log("切换到标签：", tab.label);
};

// 返回按钮
const handleGoBack = () => {
  emit("goBack");
};

// 1. 疾病诊断校验
const handleDiseaseChange = () => {
  errorMsg.disease =
    formData.diseases.length > 0
      ? ""
      : "请至少选择一项疾病诊断（无疾病也需选择）";
};

// 2. 用药记录操作
const handleAddMedication = () => {
  formData.medications.push({ drugName: "", usage: "", dosage: "" });
  ElMessage.info("已新增用药行（非必填）");
};
const handleDeleteMedication = (index) => {
  if (formData.medications.length === 1) {
    ElMessage.warning("至少保留一行用药记录");
    return;
  }
  formData.medications.splice(index, 1);
  ElMessage.success("已删除用药行");
};
const handleRowClick = (row) => {
  console.log("点击用药行数据：", row);
};
//=================================

// 2. 存储已上传文件信息（含后端返回URL）
const uploadFiles = reactive({
  healthReport: null, // 体检报告文件
});
// 3. 上传进度（可选）
const uploadProgress = reactive({
  healthReport: 0,
});

// 5. 删除已上传文件（新增功能）
const handleDeleteFile = (type) => {
  uploadFiles[type] = null;
  formData.healthReportUrl = ""; // 清空提交用的URL
  ElMessage.success("已删除上传的文件");
};

// ===================== 替换：文件上传核心逻辑 =====================

// 3. 核心：向后端上传文件（带Token和进度监听）
const uploadFileToServer = async (file, type) => {
  try {
    // 构造FormData
    const uploadFormData = new FormData();
    uploadFormData.append("file", file, file.name);

    // 获取Token（复用原有从Cookie取Token的方法）
    const token = getTokenFromCookie();
    if (!token) {
      ElMessage.error("未获取到登录状态，请重新登录");
      return;
    }

    // 发起上传请求（替换原el-upload的action逻辑）
    const response = await axios({
      method: "POST",
      url: uploadUrl.value, // 复用原有uploadUrl变量
      data: uploadFormData,
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": `multipart/form-data; boundary=${uploadFormData._boundary}`,
      },
      // 上传进度监听（可选）
      onUploadProgress: (progressEvent) => {
        const percent = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
        uploadProgress[type] = percent;
      },
    });

    // 处理后端响应（假设返回格式：{ code: 200, msg: "成功", url: "文件地址" }）
    if (response.data?.code === 200) {
      const fileUrl = response.data.url;
      // 存储文件信息（替换原formData.healthReportUrl）
      uploadFiles[type] = {
        name: file.name,
        size: file.size,
        type: file.type,
        url: fileUrl,
      };
      // 更新表单隐藏的文件URL（用于提交）
      formData.healthReportUrl = fileUrl;
      // 清空错误提示
      errorMsg.healthReport = "";
      ElMessage.success("体检报告上传成功！");
    } else {
      ElMessage.error(`上传失败：${response.data?.msg || "未知错误"}`);
    }
  } catch (error) {
    console.error("体检报告上传错误：", error);
    const errorMsg = error.response?.data?.msg || "接口异常，请检查网络！";
    ElMessage.error(`上传失败：${errorMsg}`);
  } finally {
    // 重置进度（无论成功/失败）
    setTimeout(() => {
      uploadProgress[type] = 0;
    }, 500);
  }
};

//==================================
// 基础配置（保持原有结构）
const uploadUrl = ref("http://localhost:8080/common/upload");
const printTestData = async () => {
  const testData = generateTestData();

  // 1. 提交健康评估（失败直接抛出错误）
  const healthRes = await addAssessment(testData.healthAssessment);
  if (healthRes?.code !== 200) {
    throw new Error(`健康评估失败：${healthRes?.msg || "接口无响应"}`);
  }

  // 2. 提交能力评估（上一步成功才执行）
  const abilityRes = await addAbility(testData.abilityAssessment);
  if (abilityRes?.code !== 200) {
    throw new Error(`能力评估失败：${abilityRes?.msg || "接口无响应"}`);
  }

  // 3. 提交评估报告（前两步成功才执行）
  const reportRes = await addReport(testData.assessmentReportData);
  if (reportRes?.code !== 200) {
    throw new Error(`评估报告失败：${reportRes?.msg || "接口无响应"}`);
  }

  // 返回所有接口结果，供最终判断
  return { healthRes, abilityRes, reportRes };
};
// 4. 提交全量校验
const handleSubmit = async () => {
  let isPass = true;

  // 4.1 身体健康情况校验
  if (formData.wound.length === 0) {
    errorMsg.wound = "请选择伤口情况";
    isPass = false;
  }
  if (formData.medicalCare.length === 0) {
    errorMsg.medicalCare = "请选择特殊医疗照护情况";
    isPass = false;
  }
  if (!formData.selfCare) {
    errorMsg.selfCare = "请选择自理能力";
    isPass = false;
  }
  if (formData.dementia.length === 0) {
    errorMsg.dementia = "请选择痴呆前兆情况（无则不选）";
    isPass = false;
  }
  if (!formData.healthReportUrl) {
    errorMsg.healthReport = "请上传体检报告";
    isPass = false;
  }

  const selfCareResults = formData.selfCareAbility.result;
  if (!selfCareResults.eat) {
    errorMsg.ability.selfCare.eat = "请完成进食能力评估";
    isPass = false;
  }
  if (!selfCareResults.bath) {
    errorMsg.ability.selfCare.bath = "请完成洗澡能力评估";
    isPass = false;
  }
  if (!selfCareResults.groom) {
    errorMsg.ability.selfCare.groom = "请完成修饰能力评估";
    isPass = false;
  }
  // 护理等级变更依据校验
  if (formData.careLevelChangeBasis.length === 0) {
    errorMsg.careLevelChangeBasis = "请选择至少一项能力等级变更依据";
    isPass = false;
  } else if (
    formData.careLevelChangeBasis.includes("other") &&
    !formData.otherChangeReason.trim()
  ) {
    // 勾选了“其他”但未输入内容
    errorMsg.careLevelChangeBasis = "请输入其他变更依据的具体内容";
    isPass = false;
  } else {
    errorMsg.careLevelChangeBasis = ""; // 校验通过清空错误
  }

  // 能力最终等级校验
  if (!formData.finalAbilityLevel) {
    errorMsg.finalAbilityLevel = "请选择能力最终等级";
    isPass = false;
  } else {
    errorMsg.finalAbilityLevel = "";
  }

  // 新增：2. 精神状态评估校验
  const mentalStateResults = formData.mentalStateAbility.result;
  if (!mentalStateResults.moodStability) {
    errorMsg.ability.mentalState.moodStability = "请完成情绪稳定性评估";
    isPass = false;
  }
  if (!mentalStateResults.memory) {
    errorMsg.ability.mentalState.memory = "请完成记忆力评估";
    isPass = false;
  }
  if (!mentalStateResults.judgment) {
    errorMsg.ability.mentalState.judgment = "请完成判断力评估";
    isPass = false;
  }

  // 新增：3. 感知觉与社会参与评估校验
  const sensorySocialResults = formData.sensorySocialAbility.result;
  if (!sensorySocialResults.sense) {
    errorMsg.ability.sensorySocial.sense = "请完成视听能力评估";
    isPass = false;
  }
  if (!sensorySocialResults.communication) {
    errorMsg.ability.sensorySocial.communication = "请完成语言沟通评估";
    isPass = false;
  }
  if (!sensorySocialResults.socialParticipation) {
    errorMsg.ability.sensorySocial.socialParticipation = "请完成社会参与评估";
    isPass = false;
  }

  // 4.2 原有模块校验
  if (formData.diseases.length === 0) {
    errorMsg.disease = "请至少选择一项疾病诊断";
    isPass = false;
  }
  Object.keys(errorMsg.risk).forEach((key) => {
    if (!formData[key]) {
      errorMsg.risk[key] = "请选择此项";
      isPass = false;
    }
  });
  // 体检报告校验：改为校验uploadFiles而非原fileList
  if (!uploadFiles.healthReport) {
    errorMsg.healthReport = "请上传体检报告";
    isPass = false;
  }
  // 4.3 校验不通过
  if (!isPass) {
    ElMessage.error("请完善所有带*的必填项信息");
    return;
  }
  // 4.4 校验通过：提交数据
  try {
    // 过滤空用药记录
    const validMedications = formData.medications.filter(
      (item) => item.drugName || item.usage || item.dosage
    );
    // 组装提交数据
    const submitData = {
      elderlyId: props.elderlyId,
      ...formData,
      medications: validMedications,
      // 移除上传组件相关的临时数据
      healthReport: undefined,
    };

    // 替换为你的后端接口
    // const response = await axios.post("/api/elderly/health-assessment", submitData, {
    //   headers: uploadHeaders
    // });
    try {
      // 1. 等待printTestData执行（内部已判断每步接口是否成功）
      const results = await printTestData();

      // 2. 最终判断：所有接口返回成功（根据实际后端格式调整）
      const allSuccess =
        results.healthRes?.code === 200 &&
        results.abilityRes?.code === 200 &&
        results.reportRes?.code === 200;

      if (allSuccess) {
        // 全部提交会增加到入住审批表
        const approvalForm = ref({
          checkContentId: elderId,
          auditStatus: "申请中",
          type: "入住",
          approverId: userStore.id,
          approverName: userStore.nickName,
          approverNameRole: userStore.roles[0],
          currentStep: "入住审批",
          nextStep: "入住配置",
          stepNo: "3",
          handleType: "申请中",
          bussniessId: checkInNo,
          nextApproverId: 1,
          nextApprover: "审批员A",
        });
          addAccraditationrecord(approvalForm.value);
          console.log(approvalForm.value);
        ElMessage.success(`步骤${props.stepNum}（入住评估）提交成功！`);
        emit("submitSuccess");
      } else {
        // 存在接口未明确成功的情况（兜底判断）
        throw new Error("部分接口提交未确认成功，请检查");
      }
    } catch (error) {
      // 任何失败（接口报错/状态码不对）都会进入这里
      // 优先显示printTestData中抛出的具体错误信息
      const errorMsg = error.message || error.response?.data?.msg || "网络异常";
      ElMessage.error("提交失败：" + errorMsg);
    }
  } catch (error) {
    ElMessage.error("提交失败：" + (error.response?.data?.msg || "网络异常"));
  }
};
// 分模块打印所有评估数据
// 7. 关键：JSON转字符串工具（适配MySQL）
const toJsonStr = (obj) => JSON.stringify(obj);

// 8. 生成3个模块的测试数据（最终提交格式）
const generateTestData = () => {
  // 8.1 健康评估模块数据
  const healthAssessment = {
    updateTime: currentTime.value,
    creator: userStore.id,
    elderlyId: props.elderlyId,
    diseaseDiagnosis: toJsonStr({
      selected: formData.diseases,
    }),
    medicationInfo: toJsonStr({
      list: formData.medications.filter(
        (item) => item.drugName || item.usage || item.dosage
      ),
    }),
    riskFactors: toJsonStr({
      跌倒: formData.fall,
      走失: formData.wander,
      噎食: formData.choke,
      自杀: formData.suicide,
      昏迷: formData.coma,
    }),
    woundCondition: toJsonStr({
      selected: formData.wound,
    }),
    specialMedicalCare: toJsonStr({
      selected: formData.medicalCare,
    }),
    selfCareAbility: toJsonStr({
      result: formData.selfCare,
    }),
    dementiaPrecursors: toJsonStr({
      selected: formData.dementia,
    }),
    otherConditions: toJsonStr({
      content: formData.otherHealth,
    }),
    medicalReport: toJsonStr({
      url: formData.healthReportUrl,
    }),
    assessorId: formData.assessorId,
    assessmentStatus: "入住评估",
    isDeleted: 0,
  };

  // 8.2 能力评估模块数据
  const abilityAssessment = {
    updateTime: currentTime.value,
    creator: userStore.id,
    elderlyId: props.elderlyId,
    selfCareAbility: toJsonStr({
      评估结果: formData.selfCareAbility.result,
      得分明细: formData.selfCareAbility.scores,
      模块总分: assessmentReport.value.selfCareTotal,
    }),
    mentalStatus: toJsonStr({
      评估结果: formData.mentalStateAbility.result,
      得分明细: formData.mentalStateAbility.scores,
      模块总分: assessmentReport.value.mentalStateTotal,
    }),
    perceptionSocialParticipation: toJsonStr({
      评估结果: formData.sensorySocialAbility.result,
      得分明细: formData.sensorySocialAbility.scores,
      模块总分: assessmentReport.value.sensorySocialTotal,
    }),
    assessorId: formData.assessorId,
    assessmentStatus: "入住评估",
    isDeleted: 0,
  };

  // 8.3 评估报告模块数据
  const assessmentReportData = {
    updateTime: currentTime.value,
    creator: userStore.id,
    elderlyId: props.elderlyId,
    selfCareScore: assessmentReport.value.selfCareTotal,
    mentalStatusScore: assessmentReport.value.mentalStateTotal,
    perceptionSocialScore: assessmentReport.value.sensorySocialTotal,
    estimatedTotalScore: assessmentReport.value.totalScore,
    preliminaryAbilityLevel: assessmentReport.value.abilityLevel,
    levelChangeBasis: toJsonStr({
      selected: formData.careLevelChangeBasis,
    }),
    otherBasis: toJsonStr({
      content: formData.otherChangeReason,
    }),
    finalAbilityLevel: formData.finalAbilityLevel,
    assessorId: formData.assessorId,
    assessmentStatus: "入住评估",
    isDeleted: 0,
  };
  return { healthAssessment, abilityAssessment, assessmentReportData };
};
</script>

<style scoped>
/* 操作记录页面 */
/* 1. 修复左右布局容器：限制最大宽度，避免超出屏幕 */
.content-wrapper {
  display: flex;
  gap: 20px; /* 左右间距 */
  margin-bottom: 80px; /* 给底部按钮留空间 */
  flex: 1;
  max-width: 100vw; /* 限制容器最大宽度为屏幕宽度 */
  overflow-x: hidden; /* 避免整体布局横向溢出 */
}
.left-main {
  flex: 1; /* 左侧自适应剩余空间 */
  min-width: 0; /* 允许左侧在空间不足时收缩 */
}
.right-sidebar {
  width: 400px; /* 固定右侧宽度 */
  flex-shrink: 0; /* 禁止右侧收缩 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 3. 修复操作记录卡片：限制内部内容宽度，避免文字溢出 */
.operation-record-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
  padding: 16px; /* 加内边距，避免内容贴边 */
  box-sizing: border-box; /* 确保padding不撑大宽度 */
}
.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* 让记录列表占满卡片剩余空间，可滚动 */
  overflow-y: auto; /* 内容超出时滚动 */
  max-height: calc(100% - 40px); /* 减去标题高度 */
  padding: 10px; /* 加内边距，避免内容贴边 */
}
/* 4. 优化记录项：时间区域自适应，避免文字换行 */
.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
  width: 100%; /* 确保记录项占满卡片宽度 */
}
.record-time {
  width: 110px; /* 固定时间区域宽度 */
  text-align: right;
  color: #999;
  font-size: 13px;
  margin-top: 8px;
  white-space: nowrap; /* 时间不换行 */
}
.record-icon .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #409eff; /* 蓝色：已完成/进行中 */
  margin-top: 6px;
}
.record-icon .dot.gray {
  background-color: #c0c4cc; /* 灰色：待完成 */
}
.record-content {
  flex: 1;
  margin: 0 12px;
  color: #333;
}
.record-content p {
  margin: 4px 0;
  line-height: 1.5;
}
.record-time {
  width: 120px;
  text-align: right;
  color: #999;
  font-size: 13px;
}

/* 修复：统一 test-step-content 样式（删除重复定义，保留这一个） */
.test-step-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px); /* 占满视口高度，减去上下padding */
  padding: 20px;
}

/* tab页面 */
.hidden {
  display: none !important; /* 彻底隐藏，不占位 */
  visibility: hidden; /* 双重保险，防止意外显示 */
  width: 0;
  height: 0;
}
/* 在<style scoped>中添加，确保按钮与标签有间距 */
:deep(.el-button--mini) {
  margin-left: 10px; /* 与“体检报告”标签保持10px间距 */
}
/* 红色必填标记 */
.required-mark {
  color: #ff4d4f;
  margin-right: 2px;
}

/* 错误提示 */
.error-tip {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
  margin-left: 94px;
}
.inline-tip {
  margin-left: 12px;
  margin-top: 0;
  display: inline-block;
}

/* 提示文本 */
.tip-text {
  color: #666;
  font-size: 12px;
  margin-left: 94px;
  margin-top: 4px;
}

/* 标签占位文本 */
.tab-placeholder {
  padding: 32px;
  color: #999;
  font-size: 14px;
  text-align: center;
}

/* 基础样式 */
.title {
  font-size: 20px;
  font-weight: 600;
  color: #202124;
  margin-bottom: 20px;
}
.test-step-content {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 20px;
}
.btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 16px 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.mr-3 {
  margin-right: 12px;
}
.demo-tabs > .el-tabs__content {
  padding: 16px 0;
  color: #6b778c;
  font-size: 14px;
  font-weight: 400;
}
.assessment-content {
  padding: 10px;
}
.section {
  margin-bottom: 30px;
  padding: 10px;
  border-radius: 8px;
  background-color: #fafafa;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}
.section-subtitle {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
  color: #333;
  vertical-align: top;
}
/* 单独设置“其他”标签的样式 */
.section-subtitle1 {
  display: inline-block; /* 确保能设置宽度和对齐 */
  width: 80px; /* 和其他标签保持相同宽度，保证整体对齐 */
  text-align: right; /* 文字右对齐，与输入框左侧对齐 */
  margin-right: 10px; /* 与输入框保持间距，和其他项一致 */
  vertical-align: middle; /* 关键：与输入框垂直居中对齐 */
  line-height: 32px; /* 与输入框高度匹配（Element输入框默认32px高） */
  color: #333; /* 文字颜色和其他标签统一 */
}

/* 确保输入框与标签对齐 */
:deep(.el-input) {
  vertical-align: middle; /* 输入框垂直居中，与标签对齐 */
}

/* 模块样式 */
.health-item {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.disease-diagnosis {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.medication {
  margin-bottom: 15px;
}
.risk-event {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.event-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 操作按钮组 */
.operate-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
:deep(.el-button--mini) {
  width: 32px;
  height: 32px;
  padding: 0;
}
:deep(.el-radio) {
  margin-right: 16px;
}
:deep(.el-upload) {
  margin-left: 10px;
}
.upload-file-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  padding: 8px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 图片缩略图样式 */
.image-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: default; /* 去掉鼠标悬浮手势（无预览） */
}
:deep(.el-upload-list) {
  display: none !important; /* !important 确保优先级覆盖组件默认样式 */
}
/* PDF显示样式 */
.pdf-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdf-icon {
  font-size: 24px;
  color: #ff4d4f; /* PDF红色图标 */
}
.pdf-name {
  font-size: 14px;
  color: #333;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 删除按钮样式 */
.delete-btn {
  margin-left: 8px;
}

/* 调整健康项布局（确保上传按钮和显示区横向对齐） */
.health-item {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* 改为center，垂直居中对齐 */
  gap: 8px 0;
}

/* 能力评估项容器：垂直排列（标题得分行 + 选项行） */
.ability-item {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column; /* 整体垂直排列（两行：标题得分行 + 选项行） */
  gap: 10px; /* 两行之间的间距 */
  padding-left: 40px; /* 和其他模块（如健康情况）左侧对齐 */
}

/* 标题和得分的容器：横向排列在同一行 */
.title-score-wrapper {
  display: flex;
  align-items: center; /* 标题和得分垂直居中对齐 */
  gap: 20px; /* 标题和得分之间的水平间距 */
  width: 100%; /* 占满一行 */
}

/* 标题样式：左对齐，固定宽度避免被挤压 */
.item-title {
  flex: 1; /* 占剩余空间，避免得分挤压标题 */
  color: #333;
  font-weight: 500;
  min-width: 400px; /* 保证长标题不换行到得分下方 */
}

/* 得分样式：紧跟标题右侧 */
.score {
  color: #666;
  margin-right: 20px; /* 合理间距，不挤压内容 */
  white-space: nowrap;
}

/* 选项组：单独一行，垂直排列且左对齐 */
.vertical-radio-group {
  display: flex;
  flex-direction: column; /* 选项垂直排列 */
  gap: 8px; /* 选项之间的垂直间距 */
  align-items: flex-start; /* 选项整体左对齐 */
  padding: 0;
  margin: 0;
}

/* 去除单选框默认样式干扰，确保左对齐 */
:deep(.el-radio) {
  margin: 0; /* 去除默认外边距 */
  padding: 0;
  align-items: center; /* 单选框图标和文字垂直居中 */
}

/* 单选框文字与图标间距 */
:deep(.el-radio__label) {
  margin-left: 8px; /* 仅保留必要间距，避免左偏 */
}
</style>
